<style  scoped>
.div-info {
  width: 100%;
  height: 100%;
}
.img-info {
  max-width: 100%;
  max-height: 100%;
}
.embed-info {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

<template>
  <div class="div-info">
    <img v-if="suffixType==1" :src="id" class="img-info" />
    <iframe
      v-else-if="suffixType==2"
      :src="'https://view.officeapps.live.com/op/view.aspx?src='+id"
      class="embed-info"
    />
    <iframe  v-else-if="suffixType==3" :src="id" class="embed-info" />
  </div>
</template>
<script>
import Refresh from "@/components/refresh";
export default {
  name: "word_detail",
  data() {
    return {
      suffix: ""
    };
  },
  components: {
    Refresh
  },
  computed: {
    suffixType() {
      // ['jpg','jpeg','png','doc','docx','xlsx','xls','ppt','pptx','pdf']
      if (
        this.suffix == "jpg" ||
        this.suffix == "jpeg" ||
        this.suffix == "png"
      ) {
        return 1;
      } else if (
        this.suffix == "doc" ||
        this.suffix == "docx" ||
        this.suffix == "xlsx" ||
        this.suffix == "xls" ||
        this.suffix == "pptx"
      ) {
        return 2;
      } else {
        return 3;
      }      
    }
  },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  methods: {},
  created() {},
  mounted() { 
    var index = this.id.lastIndexOf(".");
    this.suffix = this.id.substr(index + 1);    
  }
};
</script>
